<template>
  <div>
    <Card dis-hover>
      <Form ref="queryForm" :label-width="80" label-position="left" inline>
        <Row :gutter="16">
          <Col span="6">
            <FormItem label="采集时间段" style="width:100%;">
              <DatePicker v-model="pagerequest.dateRange" type="daterange" placement="bottom-start"></DatePicker>
            </FormItem>
          </Col>
          <Col span="6">
            <FormItem label="检测项目" style="width:100%;">
              <Select v-model="pagerequest.itemId" clearable>
                <Option v-for="(item, i) in itemOpts" :key="i" :value="item.value">{{ item.label }}</Option>
              </Select>
            </FormItem>
          </Col>
          <Col span="12">
            <div style="text-align:right">
              <Button
                type="primary"
                size="large"
                class="toolbar-btn"
                @click="getpage1(true)"
              >查询</Button>
            </div>
          </Col>
        </Row>
      </Form>

      <Table
        class="margin-top-10"
        :loading="tableLoading"
        :columns="columns"
        no-data-text="暂无数据"
        border
        :data="pageList"
      ></Table>
      <Page
        show-sizer
        show-total
        :total="totalCount1"
        class="margin-top-10"
        @on-change="pageChange1"
        @on-page-size-change="pagesizeChange1"
        :page-size="pageSize1"
        :current="currentPage1"
      ></Page>
    </Card>
  </div>
</template>

<script lang="ts">
import { Component, Mixins } from "vue-property-decorator";
import GetAdminUserMixin from "@/mixins/GetAdminUserMixin";
import ListMixin from "@/mixins/ListMixin";
import ajax from "@/lib/ajax";
import PageRequest from "@/store/entities/page-request";
import moment from 'moment';

class ClassItem {
  id: string = '';

  caijiDate: string = moment().format('YYYY-MM-DD'); // 采集日期
  itemName: string = '混合'; // 检测项目
  totalTimes: number = 1; // 检验次数
  totalMoney: string = '400'; // 金额总计
}

class PageListRequest extends PageRequest {
  dateRange = '';
  itemId = '';
}

@Component({
  components:{
  }
})
export default class ListComp extends Mixins(GetAdminUserMixin, ListMixin) {
  pagerequest: PageListRequest = new PageListRequest();
  
  totalCount1 = 0
  pageSize1 = 10
  currentPage1 = 1
  tableLoading = false
  pageChange1(page) {
    this.currentPage1 = page
    this.getpage1()
  }
  pagesizeChange1(pagesize) {
    this.pageSize1 = pagesize
    this.getpage1()
  }
  getpage1(flagResetPage ?: boolean) {
    if (flagResetPage) {
      this.currentPage1 = 1
    }
    this.pagerequest.maxResultCount = this.pageSize1;
    this.pagerequest.skipCount = (this.currentPage1 - 1) * this.pageSize1;
    this.getAll()
  }

  pageList: any[] = []
  editItem: ClassItem = new ClassItem();
  previewMode = false

  itemOpts = [
  ]
  
  // DONE
  async getAll() {
    this.tableLoading = true
    const list = await ajax.get('', {
      params: {
        skipCount: this.pagerequest.skipCount,
        maxResultCount: this.pagerequest.maxResultCount,
      }
    })
      .then(({ data }) => {
      })
      .catch(() => {})
      .then(() => {
        this.tableLoading = false
        /**
         * TODO: 绑接口
         */
        this.totalCount1 = 9999
        this.pageList = Object.keys([...new Array(9)]).map((i) => {
          let it = new ClassItem()
          return it
        })
      })
  }

  initColumns() {
    this.columns = [
      {
        type: 'index',
        width: 70,
        align: 'center',
        title: '序号',
        indexMethod: (row) => {
          return row._index + 1 + this.pageSize1 * (this.currentPage1 - 1)
        },
      },
      {
        title: '采集日期',
        key: 'caijiDate',
        width: 100,
        align: "center",
        render: (h:any, params: any) => {
          return h('span', params.row.caijiDate)
        }
      },
      {
        title: '检测项目',
        key: 'itemName',
        // width: 100,
        align: "center",
        render: (h:any, params: any) => {
          return h('span', params.row.itemName)
        }
      },
      {
        title: '检验次数',
        key: 'totalTimes',
        width: 100,
        align: "center",
        render: (h:any, params: any) => {
          return h('span', params.row.totalTimes)
        }
      },
      {
        title: '金额总计',
        key: 'totalMoney',
        width: 100,
        align: "center",
        render: (h:any, params: any) => {
          return h('span', `${params.row.totalMoney}元`)
        }
      },
      // {
      //   title: "操作",
      //   key: "Actions",
      //   width: 150,
      //   align: "center",
      //   render: (h: any, params: any) => {
      //     return h("div", [
      //       h(
      //         "Button",
      //         {
      //           props: {
      //             type: "primary",
      //             size: "small"
      //           },
      //           style: {
      //             marginRight: "5px"
      //           },
      //           on: {
      //             click: () => {
      //               this.onEdit(params.row)
      //             }
      //           }
      //         },
      //         "录入"
      //       ),
      //     ])
      //   },
      // }
    ]
  }


  async created() {
    ajax.post('/api/CheckItem/GetAll')
      .then(({ data }) => {
        this.itemOpts = data.data.map(x => {
          const {
            item_id, //: "12435"
            item_name, //: "新冠病毒核酸检测（常规）"
            price, //: 19.7
            type_id, //: 1
            type_name, //: "1:1（单人单管）"
          } = x
          
          return {
            value: item_id,
            label: item_name,
          }
        })
      })

    this.getpage1()
  }

  onCreate() {
    this.editItem = new ClassItem()
    this.createModalShow = true
  }

  onImport() {
    
  }

  onEdit(item) {
    console.log('---', item)
    this.editItem = item
    this.createModalShow = true
  }

  onDelete(item) {
    console.log('---', item)
    
    this.$Modal.confirm({
      title: "提示",
      content: "确认删除该问卷？",
      okText: "确定",
      cancelText: "取消",
      onOk: async () => {
        ajax.delete('/api/services/app/QuestionNaireLibrary/Remove', {
          params: {input:item.id}
        })
          .then((resp) => {})
          .catch(() => {})
          .then(() => {
            /**
             * TODO: 绑接口
             * J1.5问卷删除
             * 
             */
            this.getAll()
          })
      }
    });
  }

  onHide() {
  }

}
</script>

<style>
</style>